<script setup>
import Carousel from "@/1-home/carousel.vue";
import TopMain from "@/1-topBar/topMain.vue";
import Type from "@/1-home/type.vue";
import {onMounted, ref} from "vue";
import axios from "axios";
import Recommend from "@/1-home/recommend.vue";
import {useRoute} from "vue-router";
import LocalBottom from "@/1-classify/local-bottom.vue";

const route = useRoute();
let name1
console.log("name:" + route.query.name)
name1 = route.query.name;
let typelList = ref([]);
let detailList = ref([]);
let detailList1= ref([]);
const imgUrl = "http://localhost:8080/";
onMounted(() => {
  axios.post("http://localhost:8080/type/findAllType").then((res) => {
    typelList.value = res.data;
  })
  axios.post("http://localhost:8080/detail/findAllDetail1").then((res) => {
    detailList.value = res.data;
  })
  axios.get("http://localhost:8080/detail/findAllDetail3/" + name1).then((res) => {
    detailList1.value = res.data;
  })
})

</script>

<template>
  <div v-if="name1===undefined">
    <top-main :page="home"></top-main>
    <div class="body">
      <carousel></carousel>
      <div  class="typeclass" @click="$router.push('/classify')">
          <type v-for="item in typelList" :key="item" :text="item.name" :imageUrl="imgUrl+item.photo"></type>
      </div>
      <div v-for="(item, index) in typelList">
        <div v-for="(item1, index1) in detailList">
          <div v-if="item.name===item1.type">
            <recommend :text="item.name" :params-list="item1.detail"></recommend>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div v-if="name1!=null">
    <top-main :page="home"></top-main>
    <div class="body">
      <carousel></carousel>
      <div class="typeclass">
        <type v-for="item in typelList" :key="item" :text="item.name" :imageUrl="imgUrl+item.photo"></type>
      </div>
      <div v-for="(item, index) in typelList">
        <div v-for="(item1, index1) in detailList1">
          <div v-if="item.name===item1.type">
            <recommend :text="item.name" :params-list="item1.detail"></recommend>
          </div>
        </div>
      </div>
    </div>
  </div>
<local-bottom></local-bottom>

</template>

<style scoped lang="scss">
.body {
  width: 1200px;
  height: 100%;
  margin: auto;
  //background-color: red;
}

.typeclass {
  margin-top: 10px;
  width: 100%;
  height: 110px;
  //background-color: blue;
  display: flex;
  border: 1px solid #EBEBEB;
}
</style>

<script>
import type from "@/1-home/type.vue";
import recommend from "@/1-home/recommend.vue";

export default {
  data() {
    return {
      home: "home",
      data: [
        {
          text: '演唱会',
          items1: [
            {
              text1: '【北京】小沈阳 2024《我不！是歌手》演唱会--北京站',
              text2: '华熙LIVE·五棵松·场馆 ',
              text3: '2024.10.19 周六 19:30 ',
              num: 380,
              imageUrl: 'https://ts2.cn.mm.bing.net/th?id=OIP-C.VzhOTC3SVqdVV48AhF5grwHaFS&w=295&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2'
            },
            {
              text1: '【北京】小沈阳 2024《我不！是歌手》演唱会--北京站',
              text2: '华熙LIVE·五棵松·场馆 ',
              text3: '2024.10.19 周六 19:30 ',
              num: 380,
              imageUrl: 'https://ts2.cn.mm.bing.net/th?id=OIP-C.VzhOTC3SVqdVV48AhF5grwHaFS&w=295&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2'
            },
            {
              text1: '【北京】小沈阳 2024《我不！是歌手》演唱会--北京站',
              text2: '华熙LIVE·五棵松·场馆 ',
              text3: '2024.10.19 周六 19:30 ',
              num: 380,
              imageUrl: 'https://ts2.cn.mm.bing.net/th?id=OIP-C.VzhOTC3SVqdVV48AhF5grwHaFS&w=295&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2'
            },
            {
              text1: '【北京】小沈阳 2024《我不！是歌手》演唱会--北京站',
              text2: '华熙LIVE·五棵松·场馆 ',
              text3: '2024.10.19 周六 19:30 ',
              num: 380,
              imageUrl: 'https://ts2.cn.mm.bing.net/th?id=OIP-C.VzhOTC3SVqdVV48AhF5grwHaFS&w=295&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2'
            },
            {
              text1: '【北京】小沈阳 2024《我不！是歌手》演唱会--北京站',
              text2: '华熙LIVE·五棵松·场馆 ',
              text3: '2024.10.19 周六 19:30 ',
              num: 380,
              imageUrl: 'https://ts2.cn.mm.bing.net/th?id=OIP-C.VzhOTC3SVqdVV48AhF5grwHaFS&w=295&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2'
            },
            {
              text1: '【北京】小沈阳 2024《我不！是歌手》演唱会--北京站',
              text2: '华熙LIVE·五棵松·场馆 ',
              text3: '2024.10.19 周六 19:30 ',
              num: 380,
              imageUrl: 'https://ts2.cn.mm.bing.net/th?id=OIP-C.VzhOTC3SVqdVV48AhF5grwHaFS&w=295&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2'
            },
            {
              text1: '【北京】小沈阳 2024《我不！是歌手》演唱会--北京站',
              text2: '华熙LIVE·五棵松·场馆 ',
              text3: '2024.10.19 周六 19:30 ',
              num: 380,
              imageUrl: 'https://ts2.cn.mm.bing.net/th?id=OIP-C.VzhOTC3SVqdVV48AhF5grwHaFS&w=295&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2'
            },
          ],
        },
      ]
    };
  },
  components: {
    type,
    recommend
  },
};
</script>